<template>
  <basic-container>
    <header class="box-header">
      <el-row>
        <el-col :span="12">
          <img src="@/assets/images/management/project-titleicon.png" alt="" srcset="" />
          <span class="box-title">计划一览</span>
        </el-col>
        <el-col :span="12" align="end" style="line-height: 40px"
          ><el-button type="primary" @click="openFileDialog">批量上传附件</el-button></el-col
        >
      </el-row>
    </header>
    <div class="contain">
      <el-row>
        <el-col :span="6">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>
                  <img src="@/assets/images/management/time-shalou.png" />
                  年度计划筛选</span
                >
              </div>
            </template>
            <el-form ref="form" :model="sizeForm" label-width="auto">
              <span class="label">请选择年度：</span>
              <el-form-item label="">
                <el-select v-model="sizeForm.region" placeholder="请选择年度" style="width: 100%">
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
              </el-form-item>
              <span class="label">参加单位筛选：</span>
              <el-form-item label="">
                <el-input v-model="sizeForm.input2" class="w-50 m-2" placeholder="搜索单位名称">
                  <template #suffix>
                    <el-icon style="vertical-align: middle">
                      <Search />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
            <div class="tree-contain">
              <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
                <template v-slot="{ data: item }">
                  <span v-if="item.id == 0" style="font-weight: 900">
                    <el-icon><HomeFilled /></el-icon>
                    {{ item.label }}
                  </span>
                  <span v-else>{{ item.label }}</span>
                </template>
              </el-tree>
            </div>
          </el-card>
        </el-col>
        <el-col :span="18">
          <header>
            <span class="project-select">找到相关年度计划共2项</span>
          </header>
          <div class="project-data" v-for="item in projectGroups" :key="item.id">
            <el-row>
              <el-col :span="2">
                <div class="image-container">
                  <img src="@/assets/images/management/project-detail.png" />
                </div>
              </el-col>
              <el-col :span="20">
                <div class="project-bold-title">
                  <span class="bold-title">2022年审计项目计划</span>
                  <p class="mini-title">执行周期：<span>2022-01-01-2022-04-01</span></p>
                </div>
                <div class="project-mini-title">
                  <p>计划需求年度：<span>2022</span>|</p>
                  <p>总计划填报单位：<span>42个</span>|</p>
                  <p>总计填报项目：<span>110个</span>|</p>
                  <p>发起人：<span>欧阳咯咯</span></p>
                </div>
              </el-col>
              <el-col :span="2" style="margin: auto">
                <el-button type="primary" @click="switchHandle(item)">
                  点击{{ item.switch ? '查看' : '收起' }}</el-button
                >
              </el-col>
            </el-row>
            <el-tabs v-model="item.activeName" v-show="!item.switch" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="本单位计划统计" name="first">
                <el-table :data="tableData" header-row-style="background:#f6f8fa"  stripe style="width: 100%">
                  <el-table-column prop="date" label="计划项目名称" />
                  <el-table-column prop="name" label="实施单位" />
                  <el-table-column prop="address" label="被审计单位" />
                  <el-table-column prop="address" label="操作">
                    <template #default>
                      <el-button link type="primary" size="small" @click="handleClick">查看年度计划</el-button>
                      <el-button link type="primary" size="small" @click="handleClick">编制详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="上级单位计划统计" name="second">
                <el-table :data="tableData"  stripe style="width: 100%">
                  <el-table-column prop="date" label="上级单位计划统计" />
                  <el-table-column prop="name" label="实施单位" />
                  <el-table-column prop="address" label="被审计单位" />
                  <el-table-column prop="address" label="操作">
                    <template #default>
                      <el-button link type="primary" size="small" @click="handleClick">查看年度计划</el-button>
                      <el-button link type="primary" size="small" @click="handleClick">编制详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="年度计划附件列表" name="third">
                <el-table :data="tableData"  stripe style="width: 100%">
                  <el-table-column prop="date" label="年度计划附件列表" />
                  <el-table-column prop="name" label="实施单位" />
                  <el-table-column prop="address" label="被审计单位" />
                  <el-table-column prop="address" label="操作">
                    <template #default>
                      <el-button link type="primary" size="small" @click="handleClick">查看年度计划</el-button>
                      <el-button link type="primary" size="small" @click="handleClick">编制详情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
    </div>
    <fileUploadDialog :dialogVisible="fileVisible" @getValue="getValue"></fileUploadDialog>
  </basic-container>
</template>
<script>
import fileUploadDialog from '../preview/dialog/upload-file.vue';
const treeData = [
  {
    id: '0',
    label: 'Level one 1',
    children: [
      {
        label: 'Level one 2',
        children: [
          {
            label: 'Level two 2-1',
            children: [
              {
                label: 'Level three 2-1-1',
              },
            ],
          },
          {
            label: 'Level two 2-2',
            children: [
              {
                label: 'Level three 2-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level one 3',
        children: [
          {
            label: 'Level two 3-1',
            children: [
              {
                label: 'Level three 3-1-1',
              },
            ],
          },
          {
            label: 'Level two 3-2',
            children: [
              {
                label: 'Level three 3-2-1',
              },
            ],
          },
        ],
      },
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
];
export default defineComponent({
  name: 'viewsManagementManagePreview',
  components: {
    fileUploadDialog,
  },
  setup() {
    // 表格
    const tableData = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ]);

    // 表单配置
    const sizeForm = ref({});

    // 树形配置
    const defaultProps = {
      // 将需要的默认配置项添加到 defaultProps 中
      children: 'children',
      label: 'label',
    };
    const data = ref(treeData);

    const fileVisible = ref(false);
    const openFileDialog = () => {
      fileVisible.value = true;
    };
    const getValue = (v) => {
      fileVisible.value = v;
    };

    const projectGroups = ref([
      {
        name: '张三',
        age: '1',
        id: '001',
        switch: true,
        activeName: 'first',
      },
      {
        name: '李四',
        age: '2',
        id: '002',
        switch: true,
        activeName: 'first',
      },
      {
        name: '李四',
        age: '2',
        id: '003',
        switch: true,
        activeName: 'first',
      },
      {
        name: '李四',
        age: '2',
        id: '004',
        switch: true,
        activeName: 'first',
      },
      {
        name: '李四',
        age: '2',
        id: '005',
        switch: true,
        activeName: 'first',
      },
      {
        name: '李四',
        age: '2',
        id: '006',
        switch: true,
        activeName: 'first',
      },
    ]);
    const switchHandle = (v) => {
      const { id } = v;
      projectGroups.value.forEach((it) => {
        const item = it;
        if (item.id === id) {
          item.switch = !item.switch;
          Object.assign(it, item);
        }
      });
    };

    const handleClick = (tab, event) => {
      console.log(tab, event);
    };
    const handleNodeClick = (data) => {
      console.log(data);
    };
    // 返回组件的属性和方法
    return {
      sizeForm,
      data,
      defaultProps,
      projectGroups,
      tableData,
      switchHandle,
      fileVisible,
      openFileDialog,
      getValue,
      handleClick,
      handleNodeClick,
    };
  },
});
</script>

<style lang="scss" scoped>
.el-card__header {
  background-color: #f5f7fb;
  border: none;
}
.el-tabs__nav-wrap::after {
  width: 0;
}
::v-deep .el-table th.el-table__cell {
  background: #f6f8fa !important;
  font-size: 14px;
  font-family: SourceHanSansSC-Medium, SourceHanSansSC;
  font-weight: 500;
  color: #25292c;
  line-height: 20px;
  height: 50px;
}
.demo-tabs {
  padding: 10px;
}
.demo-tabs > .el-tabs__content {
  color: #6b778c;
  padding: 0 0 15px 0;
  font-size: 32px;
  font-weight: 600;
}
</style>
<style lang="scss">
.box-header {
  background: #f1f2f6;
  padding: 0;
  height: 50px;
  line-height: 50px;
  img {
    width: 16px;
    margin-right: 10px;
  }
  .box-title {
    font-size: 16px;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
    font-weight: bold;
    color: #25292c;
    line-height: 50px;
  }
}
.contain {
  margin-top: 0!important;
  background: #f1f2f6;
  .el-col-6 {
    font-size: 14px;
    background: #f1f2f6;
    padding-right: 15px!important;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
      font-weight: 500;
      color: #25292c;
      line-height: 20px;
      img {
        width: 14px;
        height: 14px;
        vertical-align: middle;
      }
    }
  }
  .tree-contain {
    height: calc(100vh - 435px);
    overflow-y: auto;
  }
  .el-card__body {
    margin-top: 10px;
    padding: 10px;
    .label {
      display: block;
      padding: 0 0 10px 0;
    }
  }
  .el-col-18 {
    background: white;
    height: calc(100vh - 191px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    .project-select {
      font-size: 14px;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: #989da3;
      line-height: 20px;
      color: #989da3;
    }
    .project-bold-title {
      .bold-title {
        display: inline-block;
        font-size: 16px;
        font-family: SourceHanSansSC-Bold, SourceHanSansSC;
        font-weight: bold;
        color: #25292c;
        line-height: 24px;
        margin-top: 10px;
      }
      .mini-title {
        margin-left: 15px;
        display: inline-block;
        font-size: 8px;
        margin-top: 10px;
        span {
          color: red;
        }
      }
    }
    .project-mini-title {
      font-size: 12px;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: #50565d;
      line-height: 18px;
      p {
        display: inline-block;
        line-height: 0px;
        margin-right: 10px;
        span {
          margin-right: 10px;
        }
      }
    }
  }
}
.el-card__header {
  background-color: #f5f7fb;
}
.image-container {
  padding-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 确保容器填充整个el-col */
  img {
    width: 55px;
  }
}
.centered-image {
  max-width: 100%;
  max-height: 100%;
}

.el-card__body {
  padding: 0;
}
.project-data {
  width: 100%;
  margin: 20px 0;
  border-radius: 3px;
  border: 1px solid #d9dce4;
  .el-row {
    background: #f4f5f7;
    padding: 10px 10px;
  }
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
// .el-tree-node__expand-icon {
//   display: none; /* 或者 visibility: hidden; */
// }
</style>
